<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>simple</title>
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <script src="./js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="./css/bs-slide.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
    <div class="nav nav-tabs" style="width: 600px;">
        <button class="nav-link " data-bs-toggle="tab" data-bs-target="#xxx">page1x</button>
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#yyy">page2y</button>
    </div>
    <div class="tab-content">
        <div class="tab-pane fade" id="xxx">xxxxxxxxxxx</div>
        <div class="tab-pane fade active" id="yyy">yyyyyyyyyyy</div>
    </div>
    <nav>
        <ul class="breadcrumb">
            <li class="breadcrumb-item">C:</li>
            <li class="breadcrumb-item">windows</li>
            <li class="breadcrumb-item">system32</li>
            <li class="breadcrumb-item">notepad</li>
        </ul>
    </nav>
    <ul class="breadcrumb">
        <li class="breadcrumb-item">商品资料</li>
        <li class="breadcrumb-item">库存信息</li>
    </ul>
    <!-- 卡片 一般是 img + body  ==> header + body -->
    <div class="card" style="width:200px;margin-left: 100px;">
        <div class="card-img-top ty-card-example"></div>
        <div class="card-body">
            <div class="card-title"> 震惊：xx事件 </div>
            <div class="card-text"> 12月18日，某地发生..... </div>
        </div>
    </div>
</body>

</html>